"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/14
 */
import * as React from 'react'
import {timeAreaStyles} from "../assets/styles/timeAreaPicker";
import {TimeAreaPickerProps} from "./index";
import MyText from "./MyText";
import {ViewProperties} from "react-native";
import {autoSize, commonStyles} from "../assets/styles/common";
import Line from "./Line";
import Colors from "../assets/styles/Colors";
import MyIcon from "./icon";
import {kAuthorization, SCREEN_WIDTH} from "../constant";
import T from "../utils/T";
import constant from "../utils/constant";
import Request from "../utils/Request";

const {View, Animated, TouchableOpacity, ScrollView, PanResponder, DeviceEventEmitter} = require('react-native');
const {connect} = require('react-redux');
const Collapsible = require('react-native-collapsible').default;
const {DatePicker} = require('antd-mobile');
const moment = require("moment");
const _startMoment = moment({hour: 8, minute: 0});
const _now = moment();
const itemWidth = SCREEN_WIDTH / 8;

interface bookedInfoItem {
    //创建时间
    created: string
    //开始预定时间
    start: string
    //结束预定时间
    end: string
    status: string

    id: string
    paid: string
    reserveDate: string
    room: roomItem,
    user: userItem
}


//TODO:暂未实现当前组件获取到焦点时，禁用最外层scrollview或listView禁止滚动
class TimeAreaPicker extends React.Component<TimeAreaPickerProps, any> {
    static defaultProps = {
        collapsed: false,
        haveNextStep: true,
        start: _startMoment,
        duration: 30,
        canPickDate: false,
        date: moment(),
        onNextStepPress: () => {
        },
        onChange: () => {
        }

    };


    //点击展开时间区域选择器手手势
    _tapPan: any;
    _timeAreaPan: any;

    //右侧拖拽小圆点手势
    _dragRightPan: any;

    //选中时间区域手势
    _selectTimeAreaPan: any;

    //scrollView偏移量
    _scrollViewOffSet: number;

    _timerAreaGestureState: any;
    _scrollView: any;


    //右侧小圆点当前位置
    _dragRightPosition: number;

    //选中时间区域宽度
    _width: number;

    //右侧小圆点开始触摸时的横坐标
    _dragRightOnBeginPosition: number;

    //选中时间区域开始坐标点
    _selectTimeAreaOnBeginPosition: number;
    //选中时间区域 当前横坐标
    _selectTimeAreaPosition: number;

    constructor(props: TimeAreaPickerProps, context: any) {
        super(props, context);
        this._scrollView = {
            setNativeProps: _ => _,
        };
        let duration = 0;
        if (parseInt(props.duration + '') % 30 === 0) {
            duration = props.duration / 30
        } else {
            duration = parseInt((props.duration / 30) + '')
        }
        let position = props.start ? 0 : -SCREEN_WIDTH;
        if (props.start) {
            let diff = props.start.diff(_startMoment);

            if (diff > 0 && props.start.isAfter(_startMoment)) {
                position = parseInt(((diff / 60000) / 30) + '') * itemWidth
            }
        }
        this.state = {
            focused: false,
            collapsed: props.collapsed,
            width: new Animated.Value(duration * itemWidth),
            position: new Animated.Value(position),
            //选中时间区域持续时间
            selectDuration: props.duration,
            //选中时间区开始时间
            selectStart: props.start,
            showStartDateDicker: false,
            showEndDateDicker: false,
            bookedInfo: [],
            timeArea: props.timeArea ? props.timeArea : new TimeAre(moment(props.date)),

            canBook: props.canBook,
            loadingRoomInfo: false
        };
        this.initPanResponder();
    }


    componentWillReceiveProps(nextProps: TimeAreaPickerProps, nextContext: any): void {
        // let collapsed = this.state.collapsed;
        // if (collapsed !== nextProps.collapsed) {
        //     collapsed = nextProps.collapsed;
        // }
        // let selectStart = this.state.selectStart;
        // if (!selectStart.isSame(nextProps.start)) {
        //     selectStart = nextProps.start;
        //
        // }
        // let selectDuration = this.state.selectDuration;
        // if (selectDuration !== nextProps.duration) {
        //     selectDuration = nextProps.duration;
        // }
        //
        // //长度
        // let duration = 0;
        // if (parseInt(selectDuration + '') % 30 === 0) {
        //     duration = selectDuration / 30
        // } else {
        //     duration = parseInt((selectDuration / 30) + '')
        // }
        //
        // //位置
        // let position = selectStart ? 0 : -SCREEN_WIDTH;
        // if (selectStart) {
        //     let diff = selectStart.diff(_startMoment);
        //
        //     if (diff > 0 && selectStart.isAfter(_startMoment)) {
        //         position = parseInt(((diff / 60000) / 30) + '') * itemWidth
        //     }
        // }
        //
        // this.moveTo(position);
        // this.stretchTo(duration * itemWidth);
        // this.setState({collapsed, selectStart, selectDuration});


        if (moment(this.props.date).format('YYYY-MM-DD') !== moment(nextProps.date).format('YYYY-MM-DD')) {

            const timeArea = new TimeAre(moment(nextProps.date));
            let startIndex = parseInt(this.state.position._value / itemWidth + ''),
                canBook = true,
                length = parseInt(this.state.width._value / itemWidth + '');
            for (let i = 0; i < length; i++) {
                if (timeArea.data[startIndex + i].canPick === false) {
                    canBook = false;
                    break;
                }
            }
            this.setState({
                date: nextProps.date,
                timeArea,
                canBook
            });
            this.upDateRoomBookedInfo(nextProps.date)
        }
    }


    componentDidMount() {
        DeviceEventEmitter.addListener(constant.noticeKeyOfOpenTimeAreaPicker, this.onNotice);
        DeviceEventEmitter.addListener(constant.noticeKeyOfChangeReserveDate, this.OnChangeReserveDate);

        if (!this.getCollapsed()) {
            this._scrollView.setNativeProps({scrollEnabled: true});
        }

        const offset = this.state.position._value;
        if (offset > 0) {
            this._scrollView.scrollTo({x: offset, animated: true});
        }
    };

    componentWillUnmount(): void {
        DeviceEventEmitter.removeListener(constant.noticeKeyOfOpenTimeAreaPicker);
        DeviceEventEmitter.removeListener(constant.noticeKeyOfChangeReserveDate);
    }

    /**
     *  拉伸到目标
     * @param target    目标
     * @param {boolean} change  state是否更改
     * @param {{any}} changeState 更改的state
     */
    stretchTo = (target, change = false, changeState = {}) => {
        Animated.timing(
            this.state.width,
            {
                toValue: target,
                duration: 0
            }
        ).start(_ => {
            if (change) {
                let startIndex = parseInt(this.state.position._value / itemWidth + ''),
                    canBook = true,
                    length = parseInt(target / itemWidth + '');

                for (let i = 0; i < length; i++) {
                    if (this.state.timeArea.data[startIndex + i] && this.state.timeArea.data[startIndex + i].canPick === false) {
                        canBook = false;
                        break;
                    }
                }
                changeState['canBook'] = canBook;
                this.setState({...changeState})
            }
        });
    };

    /**
     * 移动到目标区域
     * @param target 目标
     * @param {boolean} change state是否更改
     * @param {{any}} changeState 更改的state
     */
    moveTo = (target, change = false, changeState = {}) => {
        Animated.timing(
            this.state.position,
            {
                toValue: target,
                duration: 0
            }
        ).start(_ => {
            if (change) {
                let startIndex = parseInt(target / itemWidth + ''),
                    canBook = true,
                    length = parseInt(this.state.width._value / itemWidth + '');
                for (let i = 0; i < length; i++) {
                    if (this.state.timeArea.data[startIndex + i].canPick === false) {
                        canBook = false;
                        break;
                    }
                }
                changeState['canBook'] = canBook;
                this.setState({...changeState})
            }
        });
    };

    /*手势滑动相关*/
    initPanResponder() {
        this._tapPan = PanResponder.create({
            onStartShouldSetPanResponder: (evt) => true,
            onStartShouldSetResponderCapture: (evt) => true,
            onPanResponderGrant: (evt, gestureState) => {
                if (this.getCollapsed()) {
                    this._timerAreaGestureState = parseInt(((gestureState.x0 / (SCREEN_WIDTH / 8 * 26)) * 26) + '');
                    this.setState({
                        focused: true,
                    });
                    setTimeout(() => {
                        if (!this.state.focused) {
                            this.onCollapsed()
                        }

                    }, 100)
                }
            },
            onPanResponderRelease: () => {
                this.setState({
                    focused: false,
                });
            }

        });
    }

    //左侧小圆点手势结束
    onDragRightPanResponderFinish = (e, gestureState) => {
        this._scrollView.setNativeProps({scrollEnabled: true});
        const currentPosition = this._dragRightPosition;
        const left = this.state.position._value;
        const width = currentPosition - left;
        const fullWidth = parseInt((width / itemWidth) + '') * itemWidth;
        const ratio = (width - fullWidth) / itemWidth;
        let targetWidth = fullWidth + (ratio > 0.5 ? itemWidth : 0);
        targetWidth = (targetWidth / itemWidth < 0.5) ? itemWidth : targetWidth;
        const selectDuration = parseInt((targetWidth / itemWidth) + '') * 30;
        this._timerAreaGestureState = parseInt(((gestureState.x0 / (SCREEN_WIDTH / 8 * 26)) * 26) + '');
        const change = selectDuration !== this.state.selectDuration;
        this.stretchTo(targetWidth, change, {selectDuration});
        DeviceEventEmitter.emit(constant.noticeKeyOfTimeAreaUnFocus)
    };
    //选中时间区域手势结束
    onSelectTimeAreaResponderFinish = (e, gestureState) => {
        this._scrollView.setNativeProps({scrollEnabled: true});
        //选中时间区域左侧在第几个区域里面
        const ratio = parseInt((this._selectTimeAreaPosition / itemWidth) + '');
        //选中时间区域左侧所在区域的左侧横坐标
        const sidePosition = ratio * itemWidth;
        //当前选中时间区域左侧 与其所在区域左侧的偏移量
        const offset = this._selectTimeAreaPosition - sidePosition;
        let targetPosition = sidePosition + (offset / itemWidth > 0.5 ? itemWidth : 0);
        targetPosition = targetPosition < 0 ? 0 : targetPosition;
        targetPosition = (targetPosition + this.state.width._value) > itemWidth * 26 ? itemWidth * 26 - this.state.width._value : targetPosition;
        const area = parseInt((targetPosition / itemWidth) + '');
        const hour = 8 + parseInt((area / 2) + '');
        const minute = parseInt((area) + '') % 2 === 0 ? 0 : 30;
        const selectStart = moment({hour, minute});
        const change = !selectStart.isSame(this.state.selectStart);
        this.moveTo(targetPosition, change, {selectStart});
        DeviceEventEmitter.emit(constant.noticeKeyOfTimeAreaUnFocus)
    };

    //选中时间区域移动手势
    onSelectTimeAreaResponderMove = ({nativeEvent: {locationX}}, {dx, moveX}) => {
        this._selectTimeAreaPosition = this._selectTimeAreaOnBeginPosition + dx;

        //左边沿
        const area = parseInt((this._selectTimeAreaPosition / itemWidth) + '');
        const hour = 8 + parseInt((area / 2) + '');
        const minute = parseInt((area) + '') % 2 === 0 ? 0 : 30;
        const selectStart = moment({hour, minute});
        const change = (!selectStart.isSame(this.state.selectStart) && this._selectTimeAreaPosition > 0 && (this._selectTimeAreaPosition + this.state.width._value) < itemWidth * 26);
        this.moveTo(this._selectTimeAreaPosition, change, {selectStart});
        // change && this.onChange(selectStart, this.state.selectDuration);
    };

    //展开收起的时间选择区域
    onCollapsed = () => {
        this._scrollView.setNativeProps({scrollEnabled: true});
        DeviceEventEmitter.emit(constant.noticeKeyOfOpenTimeAreaPicker, JSON.stringify(this.props.roomItem));

        this._dragRightPan = PanResponder.create({
            onStartShouldSetPanResponder: (evt) => !this.getCollapsed(),
            onStartShouldSetResponderCapture: (evt) => !this.getCollapsed(),
            onPanResponderGrant: (evt, gestureState) => {
                this._width = this.state.width._value;
                this._dragRightOnBeginPosition = this.state.position._value + this._width;
                this._scrollView.setNativeProps({scrollEnabled: false})
            },

            onPanResponderTerminate: this.onDragRightPanResponderFinish,
            onPanResponderRelease: this.onDragRightPanResponderFinish,
            onPanResponderMove: (evt, gestureState) => {
                this._dragRightPosition = this._dragRightOnBeginPosition + gestureState.dx;
                this.stretchTo(this._width + gestureState.dx);
            }
        });
        this._selectTimeAreaPan = PanResponder.create({
            onStartShouldSetPanResponder: (evt) => !this.getCollapsed(),
            onStartShouldSetResponderCapture: (evt) => !this.getCollapsed(),
            onPanResponderGrant: (evt, gestureState) => {
                this._selectTimeAreaOnBeginPosition = this.state.position._value;
                this._scrollView.setNativeProps({scrollEnabled: false})
            },
            onPanResponderTerminate: this.onSelectTimeAreaResponderFinish,
            onPanResponderRelease: this.onSelectTimeAreaResponderFinish,
            onPanResponderMove: this.onSelectTimeAreaResponderMove
        });

        this.setState({collapsed: false});
        if (this.props.start) return;
        const hour = 8 + parseInt((this._timerAreaGestureState / 2) + '');
        const minute = parseInt((this._timerAreaGestureState) + '') % 2 === 0 ? 0 : 30;
        const selectStart = moment({hour, minute});
        this.moveTo(this._timerAreaGestureState * itemWidth, true, {selectDuration: 30, selectStart});
    };

    //增加选中时间区域 持续时间
    onPlusSelectDuration = () => {
        if (this.state.selectDuration < 26 * 30) {
            let selectDuration = this.state.selectDuration + 30;
            const value = this.state.width._value;
            this.stretchTo(value + itemWidth, true, {selectDuration});
            this.onChange(this.state.selectStart, selectDuration);
        }
    };

    //减少选中时间区域 持续时间
    onReduceSelectDuration = () => {
        if (this.state.selectDuration > 30) {
            const selectDuration = this.state.selectDuration - 30;
            const value = this.state.width._value;
            this.stretchTo(value - itemWidth, true, {selectDuration});
            // this.onChange(this.state.selectStart, selectDuration);
        }
    };

    //是否收起
    getCollapsed = () => {
        return this.state.collapsed
    };


    //获取 展开时间选择区域的手势
    getPanGesture = () => {
        if (this.getCollapsed()) {

            return this._tapPan.panHandlers
        } else {

            return null;
        }
    };

    //获取 右侧小圆点拖拽手势
    getDragRightPan = () => {
        if (!this.getCollapsed()) {
            if (!this._dragRightPan) {
                this._dragRightPan = PanResponder.create({

                    onStartShouldSetPanResponder: (evt) => !this.getCollapsed(),
                    onStartShouldSetResponderCapture: (evt) => !this.getCollapsed(),
                    onPanResponderGrant: (evt, gestureState) => {
                        this._width = this.state.width._value;
                        this._dragRightOnBeginPosition = this.state.position._value + this._width;
                        this._scrollView.setNativeProps({scrollEnabled: false});
                        DeviceEventEmitter.emit(constant.noticeKeyOfTimeAreaFocus)
                    },


                    onPanResponderTerminate: this.onDragRightPanResponderFinish,
                    onPanResponderRelease: this.onDragRightPanResponderFinish,
                    onPanResponderMove: (evt, gestureState) => {
                        this._dragRightPosition = this._dragRightOnBeginPosition + gestureState.dx;
                        this.stretchTo(this._width + gestureState.dx);
                    }
                });
            }
            return {...this._dragRightPan.panHandlers}
        }
        return null;
    };
    //获取 时间选区域择拖拽手势
    getSelectTimeAreaPan = () => {
        if (!this.getCollapsed()) {
            if (!this._selectTimeAreaPan) {
                this._selectTimeAreaPan = PanResponder.create({
                    onStartShouldSetPanResponder: (evt) => {
                        return !this.getCollapsed()
                    },
                    onStartShouldSetResponderCapture: (evt) => {
                        !this.getCollapsed()
                    },
                    onPanResponderGrant: (evt, gestureState) => {
                        this._selectTimeAreaOnBeginPosition = this.state.position._value;
                        this._scrollView.setNativeProps({scrollEnabled: false});

                        DeviceEventEmitter.emit(constant.noticeKeyOfTimeAreaFocus)
                    },
                    onPanResponderTerminate: this.onSelectTimeAreaResponderFinish,
                    onPanResponderRelease: this.onSelectTimeAreaResponderFinish,
                    onPanResponderMove: this.onSelectTimeAreaResponderMove
                });
            }
            return {...this._selectTimeAreaPan.panHandlers}
        }
        return null;
    };


    //下一步点击
    onNextStepPress = () => {
        this.props.onNextStepPress({
            start: this.state.selectStart,
            duration: this.state.selectDuration,
            date: this.props.date,
            timeArea: this.state.timeArea
        });
    };


    onScroll = ({
                    nativeEvent: {
                        contentOffset, contentInset, contentSize, layoutMeasurement
                    }
                }) => {
        this._scrollViewOffSet = contentOffset.x;
    };


    //时间选择器 事件
    showStartDateDicker = () => {
        this.setState({showStartDateDicker: true})
    };
    showEndDateDicker = () => {
        this.setState({showEndDateDicker: true})
    };
    onStartDateDickerDidSelectDate = (date) => {
        let selectStart = moment(date);
        const diff = selectStart.diff(_startMoment);
        let position = 0;
        let full = 0;
        let dot = 0;
        if (diff > 0 && selectStart.isAfter(_startMoment)) {
            const minute = parseInt((diff / 60000) + '');
            full = position = parseInt((minute / 30) + '');
            dot = parseInt((minute % 30) + '');
            position = full + (dot > 15 ? 1 : 0);
        }

        this.moveTo(position * itemWidth);
        selectStart = moment({hour: 8 + position / 2, minute: position % 2 === 0 ? 0 : 30});
        this.setState(
            {
                showStartDateDicker: false,
                // selectStart
                selectStart
            });
        this.onChange(selectStart, this.state.selectDuration);

    };
    onEndDateDickerDidSelectDate = (date) => {
        const selectMomet = moment(date);
        const diff = selectMomet.diff(this.state.selectStart);
        const minute = parseInt((diff / 60000) + '');
        let full = parseInt((minute / 30) + '');
        const dot = parseInt((minute % 30) + '');
        full = full + (dot > 15 ? 1 : 0);
        // console.log(full);
        this.stretchTo(full * itemWidth);
        //selectDuration: full * 30
        this.setState({showEndDateDicker: false, selectDuration: full * 30});
        this.onChange(this.state.selectStart, full * 30);
    };
    hideDateDicker = () => {
        this.setState({showStartDateDicker: false});
        this.setState({showEndDateDicker: false});
    };

    onChange = (start: any, duration: number) => {
    };

    //更新房间预定信息
    upDateRoomBookedInfo = (date) => {
        this.setState({
            loadingRoomInfo: true
        });
        let params = {
            roomId: this.props.roomItem.id,
            date: moment(date).format('YYYY-MM-DD')
        };
        params[kAuthorization] = this.props.auth.token_type + ' ' + this.props.auth.access_token;
        Request.get(Request.getApi().roomBookedInfo, params)
            .then((d: bookedInfoItem[]) => {
                this.setState({
                    loadingRoomInfo: false
                });
                if (d) {
                    d.map((b: bookedInfoItem) => {
                        let obj = {};
                        obj['startIndex'] = (moment(b.start, 'HH:mm').hour() - 8) * 2 + (moment(b.start, 'HH:mm').minute() >= 30 ? 1 : 0);
                        obj['length'] = parseInt(Math.abs(moment(b.end, 'HH:mm').diff(moment(b.start, 'HH:mm'), 'minute')) / 30 + '');
                        return obj;
                    }).map((flag: { startIndex: number, length: number }) => {
                        for (let i = 0; i < flag.length; i++) {
                            this.state.timeArea.data[flag.startIndex + i].canPick = false;
                        }
                    });
                    this.setState({
                        bookedInfo: d,
                        timeArea: this.state.timeArea
                    });
                }
            })
            .catch(e => {
                this.setState({
                    loadingRoomInfo: false
                });
                // console.log('出错', e);
            })
    };
    OnChangeReserveDate = (e) => {
        this.upDateRoomBookedInfo(JSON.parse(e));
    };

    //收到notice通知 暂无
    onNotice = (e) => {
        const roomItem: roomItem = JSON.parse(e);
        if (roomItem.id !== this.props.roomItem.id) {
            if (!this.getCollapsed()) {
                this.setState({collapsed: true, focused: false})
            }
        } else {
            this.upDateRoomBookedInfo(this.props.date);
        }
    };

    render() {
        let minEndDate = this.state.selectStart;
        minEndDate = moment(minEndDate).add(30, 'minute');
        return (
            <View>
                {/*时间选择器*/}
                {this.props.canPickDate ? <View style={timeAreaStyles.selectTimeBtnContainer}>
                    <TouchableOpacity style={timeAreaStyles.selectTimeBtn}
                                      disabled={this.getCollapsed()}
                                      onPress={this.showStartDateDicker}>
                        <MyIcon name={'icon-shijian'} size={autoSize(15)} color={Colors.SubTitle}/>
                        <MyText color={Colors.Title} fontSize={15}
                                style={{marginLeft: 10}}>{this.state.selectStart.format('HH:mm')}</MyText>
                    </TouchableOpacity>
                    <View style={timeAreaStyles.selectTimeSeparate}/>
                    <TouchableOpacity style={timeAreaStyles.selectTimeBtn}
                                      disabled={this.getCollapsed()}
                                      onPress={this.showEndDateDicker}>
                        <MyText color={Colors.SubTitle} fontSize={15} style={{marginRight: 10}}>{T('end')}:</MyText>
                        <MyText color={Colors.Active}
                                fontSize={15}>{moment(this.state.selectStart).add(this.state.selectDuration, 'minute').format('HH:mm')}</MyText>
                    </TouchableOpacity>
                </View> : null}
                <View style={timeAreaStyles.col}>

                    {/*覆盖层,初次点击事件响应层*/}
                    <View style={[timeAreaStyles.timeAxis]}
                          {...this.getPanGesture()}>
                        <ScrollView horizontal
                                    onScroll={this.onScroll}
                                    scrollEventThrottle={60}
                                    scrollEnabled={false}
                                    ref={ref => this._scrollView = ref}
                                    contentContainerStyle={[{backgroundColor: Colors.Background}, commonStyles.relative]}
                                    showsVerticalScrollIndicator={false}
                                    showsHorizontalScrollIndicator={false}>
                            {this.state.timeArea.data.map((item: TimeItem, index) => {
                                return <TimeAreaItem timeItem={item}
                                                     lastOne={index === this.state.timeArea.data.length}
                                                     enable={item.canPick}
                                                     begin={index % 2 === 0}
                                                     key={index}/>
                            })}
                            <Animated.View {...this.getSelectTimeAreaPan()}
                                           style={[commonStyles.absolute, timeAreaStyles.pickerArea,
                                               {
                                                   width: this.state.width,
                                                   left: this.state.position,
                                                   backgroundColor: this.state.canBook ? Colors.Active : Colors.CanNotPick
                                               }]}>
                                <View
                                    style={[commonStyles.flexRow, commonStyles.flex1, timeAreaStyles.dragFlagContainer]}>
                                    <View  {...this.getDragRightPan()}
                                           style={timeAreaStyles.dragFlagRight}/>
                                </View>
                            </Animated.View>
                        </ScrollView>
                        {this.state.loadingRoomInfo ? <View style={timeAreaStyles.loadingRoomInfo}>
                            <MyText color={Colors.White} style={{marginTop: autoSize(25)}}>更新房间预定信息中...</MyText>
                        </View> : null}
                    </View>

                    <Collapsible collapsed={this.state.collapsed} align="center">
                        <View
                            style={[timeAreaStyles.actionBar, {height: autoSize(this.props.haveNextStep ? 102 : 50),}]}>
                            <View style={[commonStyles.flex1, commonStyles.flexRow, timeAreaStyles.actionsContainer]}>
                                <TouchableOpacity onPress={this.onReduceSelectDuration}>
                                    <MyIcon name='icon-jian' color={Colors.Active}/>
                                </TouchableOpacity>
                                <View style={[commonStyles.flex1, timeAreaStyles.actionsTextContainer]}>
                                    <MyText>{`${this.state.selectDuration} ${T('minute')}`}</MyText>
                                    <MyText>{`${this.state.selectStart.format('HH:mm')}-${moment(this.state.selectStart).add(this.state.selectDuration, 'minute').format('HH:mm')}`}</MyText>
                                </View>
                                <TouchableOpacity onPress={this.onPlusSelectDuration}>
                                    <MyIcon name='icon-iconfont707' color={Colors.Active}/>
                                </TouchableOpacity>
                            </View>
                            {this.props.haveNextStep ?
                                <TouchableOpacity style={[timeAreaStyles.actionButton, commonStyles.centerVH,
                                    {backgroundColor: this.state.canBook ? Colors.Active : Colors.Disabled}]}
                                                  disabled={!this.state.canBook}
                                                  onPress={this.onNextStepPress}>
                                    <MyText
                                        color={Colors.White}>{T(this.state.canBook ? 'Next step' : 'Please select correct time')}</MyText>
                                </TouchableOpacity> : null}

                        </View>
                    </Collapsible>
                </View>
                {/*开始时间选择器*/}
                <DatePicker visible={this.state.showStartDateDicker}
                            mode="time"
                            value={_startMoment.toDate()}
                            minDate={_now.toDate()}
                            onDismiss={this.hideDateDicker}
                            onOk={this.onStartDateDickerDidSelectDate}/>
                {/*结束时间选择器*/}
                <DatePicker visible={this.state.showEndDateDicker}
                            mode="time"
                            minDate={minEndDate.toDate()}
                            value={_startMoment.toDate()}
                            onDismiss={this.hideDateDicker}
                            onOk={this.onEndDateDickerDidSelectDate}/>
            </View>
        )
    }
}


interface _TimeAreaItemProps extends ViewProperties {
    lastOne?: boolean,
    enable?: boolean,
    begin?: boolean,
    timeItem: TimeItem,
}


class TimeAreaItem extends React.Component<_TimeAreaItemProps, any> {
    static defaultProps = {
        enable: false,
        begin: false
    };

    render() {
        return (
            <View style={[commonStyles.relative, {
                height: '100%',
                width: itemWidth,
                backgroundColor: Colors.White
            }]}>
                <View style={[{height: autoSize(25), display: 'flex', justifyContent: 'flex-end', paddingLeft: 2}]}>
                    {this.props.timeItem.showLabel ? <MyText fontSize={10}>{this.props.timeItem.label}</MyText> : null}
                </View>

                <View
                    style={[commonStyles.flex1, {backgroundColor: this.props.enable ? Colors.White : Colors.UnAvailable}]}>

                </View>


                <Line width={1}
                      height={this.props.lastOne ? autoSize(75) : (this.props.begin ? autoSize(75) : autoSize(60))}
                      style={[commonStyles.absolute, {left: 0, bottom: 0}]} color={'#E0E0E0'}/>
            </View>
        )
    }
}


class TimeItem {
    value: number;
    label: string;
    showLabel: boolean;
    canPick: boolean;

    constructor(value: number, label: string, showLabel: boolean, canPick = true) {
        this.value = value;
        this.label = label;
        this.showLabel = showLabel;
        this.canPick = canPick;
    }
}


class TimeAre {
    data: Array<TimeItem>;

    constructor(date = moment()) {
        let time = 8;
        let isToday = date.format('YYY-MM-DD') === moment().format('YYY-MM-DD');
        this.data = new Array(26).fill('').map((_, i) => {

            const item = new TimeItem(time, `${time}时`, i % 2 === 0);
            if (isToday) {
                const t1 = moment({
                    hour: parseInt(time * 10 + '') / 10,
                    minute: parseInt(time * 10 + '') % 10 / 10 * 60
                });
                const t2 = moment({hour: date.hour(), minute: date.minute()});
                item.canPick = !t1.isBefore(t2);
            } else {
                item.canPick = true;
            }
            time += 0.5;
            return item;
        });
    }
}

export default connect(
    ({auth}) => ({auth})
)(TimeAreaPicker);